<template>
  <!-- <Tree
    checkable
    :tree-data="treeData"
    :load-data="onLoadData"
  /> -->
  <Tree
    checkable
    :tree-data="treeData"
  />
</template>

<script setup lang="ts">
  import { ref, reactive, nextTick } from 'vue'
  import { Tree } from 'ant-design-vue'
  import { getTreeDataApi, getTreeDataAsync } from '../utils/utils'
  let treeData = reactive([])
  // getTreeDataApi().then(res => {
  //   res.forEach(item => {
  //     treeData.push(item)
  //   })
  // })
  const worker = new Worker('../utils/worker.js')
  worker.onmessage = (e) => {
    console.log(e)
    // e.da.forEach(item => {
    //   treeData.push(item)
    // })
  }

  const mapData = (list, updateItem) => {
    if (!list) return;
    return list.map(item => {
      if (item.key === updateItem.parentKey) {
        return {...item, ...updateItem}
      }
      return {
        ...item,
        children: mapData(item.children, updateItem)
      }
    })
  }

  const parseData = (list, updateItem) => {
    if (!list) return;
    list.forEach((item, index) => {
      if (item.key === updateItem.parentKey) {
        list[index] = {...item, ...updateItem}
      } else if (item.children) {
        parseData(item.children, updateItem)
      }
    })
  }
  const onLoadData = props => {
    return new Promise(resolve => {
      if (props.dataRef.children) {
        resolve();
        return;
      }
      const lengthMap = {
      1: 20,
      2: 20,
      3: 20
    };
    getTreeDataAsync(lengthMap[props.level], props.key).then(res => {
      // treeData.value = mapData(treeData.value, {
      //   parentKey: props.key,
      //   children: res
      // })
      parseData(treeData, {
        parentKey: props.key,
        children: res
      })
      resolve()
    })
    });
  };
</script>

<style>
</style>